import type { StoryObj } from "@storybook/vue3";
import { reactive, ref } from "vue";
import { ElButton, ElRadioGroup, ElRadio, ElTag } from "element-plus";
import { ZwUnityKitSelectDepart } from "../../src/ZwUnityKitSelectDepart/index";

window.domainApi = "//api-dev.scrm.keyid.cn";

export default {
  title: "Scrm System/ZwUnityKitSelectDepart Library/ZwUnityKitSelectDepart",
  component: ZwUnityKitSelectDepart,
  tags: ["autodocs"],
  argTypes: {
    modelValue: {
      control: { type: "boolean" },
      type: { name: "boolean", required: false },
      description: "显示/隐藏选择员工弹窗",
    },
    selected: {
      control: { type: "array" },
      type: { name: "string", required: false },
      description:
        "可使用v-model:selected/已选择员工数组集合，每一项必须包含id, Array<{ id, name, [prop: string]: any }>",
    },
    selectType: {
      control: { type: "radio" },
      type: { name: "radio", required: false },
      options: ["all", "user"],
      description:
        "选择数据的类型： user 选择员工，选择部门时会选择以下员工, all 选择全部, 部门和员工可以单独选择",
    },
    isLocal: {
      control: { type: "radio" },
      type: { name: "string", required: false },
      options: ["all", "yes", "not"],
    },
    isWxFollowUser: {
      control: { type: "radio" },
      type: { name: "string", required: false },
      options: ["all", "yes", "not"],
    },
    isOpenSessionArchive: {
      control: { type: "radio" },
      type: { name: "string", required: false },
      options: ["all", "yes", "not"],
    },
    hasAuthorization: {
      control: { type: "radio" },
      type: { name: "string", required: false },
      options: ["all", "yes", "not"],
    },
    limitNum: {
      control: { type: "number" },
      type: { name: "number", required: false },
    },
  },
};

/**
 * 处理公共的标签样式
 */
const tagStyle = {
  display: "flex",
  "flex-wrap": "wrap",
  gap: "8px",
};

// 默认演示
type Story = StoryObj<typeof ZwUnityKitSelectDepart>;
export const Default: Story = {
  render: (args) => ({
    components: { ZwUnityKitSelectDepart, ElButton, ElTag },
    setup() {
      const visible = ref(false);

      const tooggleVisible = () => {
        visible.value = !visible.value;
      };

      const depart = reactive<Array<any>>([]);
      const onSubmit = (data: Array<any>) => {
        depart.length = 0;
        depart.push(...data);
        args.selected = data;
      };

      return { args, visible, tooggleVisible, onSubmit, depart, tagStyle };
    },
    template: `
            <main>
                <el-button @click="tooggleVisible" >点击打开选择员工弹窗</el-button>
                <ZwUnityKitSelectDepart v-model="visible" v-bind="args" @submit="onSubmit" />
                <br />
                <br />
                当前选中：
                <div :style="tagStyle" >
                    <el-tag v-for="item in depart"  >
                    【 姓名：{{ item.name }} ID: {{ item.id }} 】
                    </el-tag>
                </div>
            </main>
        `,
  }),
};

/**
 * 默认选中值
 */
export const DefaultSelected: Story = {
  render: (args) => ({
    components: { ZwUnityKitSelectDepart, ElButton, ElTag },
    setup() {
      const visible = ref(false);

      const tooggleVisible = () => {
        visible.value = !visible.value;
      };

      const depart = reactive<Array<any>>([
        {
          id: 501,
          name: "李飞飞",
        },
        {
          id: 576,
          name: "王波",
        },
      ]);
      const onSubmit = (data: Array<any>) => {
        depart.length = 0;
        depart.push(...data);
        args.selected = data;
      };
      return { args, visible, tooggleVisible, onSubmit, depart, tagStyle };
    },
    template: `
            <main>
                <el-button @click="tooggleVisible" >选择员工</el-button>
                <ZwUnityKitSelectDepart v-model="visible" v-bind="args" @submit="onSubmit" />
                <br />
                默认选中：
                <div :style="tagStyle" >
                    <el-tag v-for="item in depart"  >
                    【 姓名：{{ item.name }} ID: {{ item.id }} 】
                    </el-tag>
                </div>
            </main>
        `,
  }),
  args: {
    selected: [
      {
        id: 501,
        name: "李飞飞",
      },
      {
        id: 576,
        name: "王波",
      },
    ],
  },
};

/**
 * 省略了使用onSubmit事件的方式，如果你不需要在submit事件中做额外处理的话，用v-model:selected，是非常方便的
 */
export const vModelSelected: Story = {
  render: (args) => ({
    components: { ZwUnityKitSelectDepart, ElButton, ElTag },
    setup() {
      const visible = ref(false);

      const tooggleVisible = () => {
        visible.value = !visible.value;
      };

      const depart = reactive<Array<any>>([
        {
          id: 501,
          name: "李飞飞",
        },
        {
          id: 576,
          name: "王波",
        },
      ]);

      return { args, visible, tooggleVisible, depart, tagStyle };
    },
    template: `
            <main>
                <el-button @click="tooggleVisible" >选择员工</el-button>
                <ZwUnityKitSelectDepart v-model="visible" v-model:selected="depart" v-bind="args" />
                <br />
                <br />
                默认选中：
                <div :style="tagStyle" >
                    <el-tag v-for="item in depart"  >
                    【 姓名：{{ item.name }} ID: {{ item.id }} 】
                    </el-tag>
                </div>
            </main>
        `,
  }),
  args: {},
};

/**
 * 自定义查询条件根据以下条件查询
 * isLocal: 本地员工、
 * isWxFollowUser：企微外部联系人权、
 * isOpenSessionArchive：开启回话存档、
 * hasAuthorization：查询授权scrm系统的员工
 */
export const apiSearch: Story = {
  render: (args) => ({
    components: {
      ZwUnityKitSelectDepart,
      ElButton,
      ElRadioGroup,
      ElRadio,
      ElTag,
    },
    setup() {
      const visible = ref(false);

      const tooggleVisible = () => {
        visible.value = !visible.value;
      };

      const depart = reactive<Array<any>>([]);
      const onSubmit = (data: Array<any>) => {
        depart.length = 0;
        depart.push(...data);
        args.selected = data;
      };

      return { args, visible, tooggleVisible, onSubmit, depart, tagStyle };
    },
    template: `
            <main>
                <div>
                    isLocal: 本地员工
                    <el-radio-group v-model="args.isLocal">
                        <el-radio label="all" size="large">全部</el-radio>
                        <el-radio label="yes" size="large">是</el-radio>
                        <el-radio label="not" size="large">否</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    isWxFollowUser：企微外部联系人权
                    <el-radio-group v-model="args.isWxFollowUser">
                        <el-radio label="all" size="large">全部</el-radio>
                        <el-radio label="yes" size="large">是</el-radio>
                        <el-radio label="not" size="large">否</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    isOpenSessionArchive：开启回话存档、
                    <el-radio-group v-model="args.isOpenSessionArchive">
                        <el-radio label="all" size="large">全部</el-radio>
                        <el-radio label="yes" size="large">是</el-radio>
                        <el-radio label="not" size="large">否</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    hasAuthorization：查询授权scrm系统的员工
                    <el-radio-group v-model="args.hasAuthorization">
                        <el-radio label="all" size="large">全部</el-radio>
                        <el-radio label="yes" size="large">是</el-radio>
                        <el-radio label="not" size="large">否</el-radio>
                    </el-radio-group>
                </div>
                <el-button @click="tooggleVisible" >选择员工</el-button>
                <ZwUnityKitSelectDepart v-model="visible" v-bind="args" @submit="onSubmit" />
                <br />
                当前选中：
                <div :style="tagStyle" >
                    <el-tag v-for="item in depart"  >
                    【 姓名：{{ item.name }} ID: {{ item.id }} 】
                    </el-tag>
                </div>
            </main>
        `,
  }),
  args: {
    isLocal: "not",
    isWxFollowUser: "yes",
    isOpenSessionArchive: "all",
    hasAuthorization: "all",
  },
};

/**
 * 自定义禁用场景
 * disabledDepart函数里会有默认的禁用场景与文案，如果需要记得 return [item.disabeld, item.select_msg]
 */
export const DisabledSelected: Story = {
  render: (args) => ({
    components: {
      ZwUnityKitSelectDepart,
      ElButton,
      ElRadioGroup,
      ElRadio,
      ElTag,
    },
    setup() {
      const visible = ref(false);

      const tooggleVisible = () => {
        visible.value = !visible.value;
      };

      const depart = reactive<Array<any>>([]);
      const onSubmit = (data: Array<any>) => {
        depart.length = 0;
        depart.push(...data);
        args.selected = data;
      };

      return { args, visible, tooggleVisible, onSubmit, depart, tagStyle };
    },
    template: `
            <main>
                <el-button @click="tooggleVisible" >选择员工</el-button>
                <ZwUnityKitSelectDepart v-model="visible" v-bind="args" @submit="onSubmit" />
                <br />
                默认被被禁用：{
                    name: '卫金豆',
                    id: 542
                }
                <br />
                当前选中：
                <div :style="tagStyle" >
                    <el-tag v-for="item in depart"  >
                    【 姓名：{{ item.name }} ID: {{ item.id }} 】
                    </el-tag>
                </div>
            </main>
        `,
  }),
  args: {
    disabledDepart: (item: any) => {
      if (item.id === 542) {
        return [true, "我就是不让你选"];
      }
      return [item.disabled, item.select_msg];
    },
  },
};
